<template>
  <div class="subPage">
    <div class="initTop">
      <img :src="orderBackgroundImg" />
      <div class="textTip">
        <p>运费到付,请仔细核对您的收货信息</p>
        <p>一旦提交不可修改，请慎重填写！</p>
      </div>
      <div class="addressDiv">
        <div class="init1 borderBtm">收货地址</div>
        <div class="item clearfix borderBtm">
          <div class="name fl">收货人姓名</div>
          <input
            class="fr ipt"
            placeholder="请填写收货人姓名"
            v-model="postFrom.receive_name"
            type="text"
            maxlength="20"
          />
        </div>
        <div class="item clearfix borderBtm">
          <div class="name fl">手机号码</div>
          <input
            class="fr ipt"
            placeholder="请填写手机号码"
            type="number"
            maxlength="11"
            v-model="postFrom.phone"
          />
        </div>
        <picker mode="region" @change="regionChange" :value="region">
          <div class="item clearfix borderBtm nowrap">
            <div class="name fl">所在地区</div>
            <div class="fr ipt">
              <span v-if="region[0] !== ''">{{ region[0] }}{{ region[1] }}{{ region[2] }}</span>
              <span v-else style="color:#808080">请选择所在地区</span>
            </div>
          </div>
        </picker>
        <div class="item clearfix borderBtm">
          <div class="name fl">邮政编码</div>
          <input
            class="fr ipt"
            placeholder="邮政编码"
            type="number"
            maxlength="6"
            v-model="postFrom.postal_code"
            disabled
          />
        </div>
        <div class="item clearfix">
          <div class="name fl">详细地址</div>
          <input
            class="fr ipt"
            placeholder="请填写详细地址"
            type="text"
            maxlength="50"
            v-model="postFrom.detail_address"
          />
        </div>
      </div>
    </div>
    <div class="initBtm">
      <div class="fr">
        订单总额 {{ orderDetail.sum }}元
        <!-- <span class="doBtn" @click="surePost">去支付</span> -->
        <span class="doBtn" v-if="type === '1'" @click="surePost('1')">去支付</span>
        <span class="doBtn" v-if="type === '2'" @click="surePost('2')">提交</span>
      </div>
    </div>
    <div class="payModal" v-if="PayFlag">
      <div class="pay_content">
        <div class="title">
          <p>选择支付方式</p>
          <img src="/static/images/close.png" alt @click="PayFlag=false" />
        </div>
        <div class="content">
          <div class="lineItem" @click="payByCash">
            <p>
              <img src="/static/images/peoson_pay.png" alt class="logo" />
              现金支付
              <span>(支持微信支付)</span>
            </p>
            <img
              :src="iscash?'/static/images/pay_checked.png':'/static/images/pay_notcheck.png'"
              alt
            />
          </div>
          <div class="lineItem" @click="payByCard" v-if="feePayStatus">
            <p>
              <img src="/static/images/yb_pay.png" alt class="logo" />
              医保支付
              <span>(支持武汉医保)</span>
            </p>
            <img
              :src="iscash?'/static/images/pay_notcheck.png':'/static/images/pay_checked.png'"
              alt
            />
          </div>
          <div class="lineItem">
            处方订单费用：
            <span class="cost">{{orderDetail.prescription_price}}</span>
          </div>
          <div class="lineItem">
            检验检查订单费用：
            <span class="cost">{{orderDetail.check_price}}</span>
          </div>
          <div class="sureBtn">
            <p class="total">
              诊疗费用合计：
              <span>{{orderDetail.sum}}</span>
            </p>
            <p class="tip">支付成功后，您可在诊疗订单、处方、检验、检查模块查看订单状态</p>
            <p class="button" @click="topay">提交</p>
          </div>
        </div>
      </div>
    </div>
    <i-message id="message" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  data() {
    return {
      userInfo: {},
      postFrom: {
        receive_name: "",
        province_name: "",
        province_code: "",
        city_name: "",
        city_code: "",
        district_name: "",
        district_code: "",
        detail_address: "",
        phone: "",
        order_no: "",
        postal_code: ""
      },
      region: ["", "", ""],
      num: "",
      type: "",
      imgUrl: "",
      orderBackgroundImg: "",
      iscash: true,
      PayFlag: false,
      orderDetail: {},
      order_id: {},
      sum: "",
      feePayStatus: true // 是否有医保支付这个选项
    };
  },
  // onUnload: function () {
  //    wx.redirectTo({
  //       url: "/pages/center/child/prescriptionOrder/main"
  //     });
  // },
  onLoad(options) {
    this.imgUrl = api.imgUrl;
    this.PayFlag = false;
    this.orderBackgroundImg = this.imgUrl + "orderBackground.png";
    this.postFrom.order_no = options.orderno || "20200305163022WHDX3683";
    this.getMsg();
    this.num = options.pay;
    this.type = options.type;
    console.log(this.type)
    this.order_id = options.orderId;
    this.userInfo = this.$storage.getAccountInfo();
    console.log("this.userInfo", this.userInfo);
    this.postFrom.receive_name = this.userInfo.patient_name;
    this.postFrom.phone = this.userInfo.phone;
    this.postFrom.detail_address = "";
    this.postFrom.postal_code = "";
    this.region[0] = "";
  },
  methods: {
    payByCash() {
      this.iscash = true;
    },
    payByCard() {
      this.iscash = false;
    },
    topay() {
      let pages = getCurrentPages(); //页面对象
      let prevpage = pages[pages.length - 2]; //上一个页面对象
      let step = 3;
      if(prevpage.route === 'pages/center/child/orderDetails/main'){
        step ++
      }
      var that = this;
      if (this.iscash) {
        that.$storage.setCardeStatus(step);
        this.$router.push(
          `/pages/center/child/pay/main?orderId=${this.order_id}&sum=${
            this.orderDetail.sum
          }&way=1`
        );
      } else {
        console.log("医保");
        that.$api.get_user_info("", { showLoading: true }).then(function(res) {
          var userInfo = res.data[0];
          console.log("userInfo.insurance_card", userInfo.insurance_card);

          if (userInfo.insurance_card) {
            that.$storage.setCardeStatus(step);
            that.$router.push(
              `/pages/center/child/pay/main?orderId=${that.order_id}&sum=${
                that.orderDetail.sum
              }&way=2`
            );
          } else {
            that.$storage.setCardeStatus(step+1);
            that.$router.push(
              `/pages/center/child/makeSure/main?orderId=${that.order_id}&sum=${
                that.orderDetail.sum
              }`
            );
          }
        });

        // this.$router.push(`/pages/center/child/makeSure/main?orderId=${this.order_id}&sum=${this.orderDetail.sum}`);
      }
      //this.$router.push(`/pages/center/child/address/main?orderno=${this.postFrom.order_no}&pay=${item.ordersum}&type=${this.postFrom.point_type}`)

      //  "child/makeSure/main"
    },
    //订单详情
    getMsg() {
      var that = this;
      let data = {
        order_no: this.postFrom.order_no
      };
      that.$api.pay_hint(data, { showLoading: true }).then(res => {
        this.orderDetail = res.data;
      }).then(res => {
        this.$api.user_regular_list("", { showLoading: true }).then( (res)=> {
          for (let i = 0; i < res.data.length; i++) {
            if (this.orderDetail.regular_id == res.data[i].regular_id) {
              if (res.data[i].fee_type_code == 'WHA01') {
                this.feePayStatus = true
                return
              }
            }
          }
          this.feePayStatus = false
        })
      });
    },

    // 提交  去支付
    surePost(type) {
      let that = this;
      that.iscash = true
      console.log("post", "post");
      let reg = /^[0-9a-zA-Z]{6,16}$/;

      if (that.postFrom.receive_name.trim() == "") {
        $Message({
          content: "请填写姓名",
          type: "warning"
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(that.postFrom.phone)) {
        $Message({
          content: "请输入合法手机号",
          type: "warning"
        });
        return;
      }
      if (that.postFrom.province_name == "") {
        $Message({
          content: "请选择地区",
          type: "warning"
        });
        return;
      }
      if (!that.postFrom.postal_code) {
        $Message({
          content: "请选择地区",
          type: "warning"
        });
        return;
      }
      if (that.postFrom.detail_address.trim() == "") {
        $Message({
          content: "请填写详细地址",
          type: "warning"
        });
        return;
      }
      that.$api.addAddress(that.postFrom, { showLoading: true }).then(res => {
        if (res.code == 0) {
          if (type == 1) {
            that.PayFlag = true;
          } else if (type == 2) {
            $Message({
              content: "添加成功",
              type: "success"
            });
            setTimeout(() => {
              that.$router.push("/pages/center/child/deal/main");
            }, 600);
          }
        }
      });
    },
    // 地区选择
    regionChange(e) {
      let that = this;
      console.log("e", e);
      that.code = e.mp.detail.code;
      let value = e.mp.detail.value;
      if (
        that.code[0] == "710000" ||
        that.code[0] == "810000" ||
        that.code[0] == "820000"
      ) {
        wx.showToast({
          title: '暂不支持该地区，请重新选择',
          icon: 'none',
          duration: 2000
        })
        return;
      }
      that.region = e.mp.detail.value;
      that.postFrom.postal_code = e.mp.detail.postcode;
      that.postFrom.province_name = that.region[0];
      that.postFrom.city_name = that.region[1];
      that.postFrom.district_name = that.region[2];
      that.postFrom.province_code = that.code[0];
      that.postFrom.city_code = that.code[1];
      that.postFrom.district_code = that.code[2];
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.initTop {
  flex: 1;
  position: relative;
  background: #f9f9f9;
  img {
    width: 100%;
    height: 289rpx;
  }
  .textTip {
    position: absolute;
    left: 68rpx;
    top: 30rpx;
    p:nth-child(1) {
      height: 56rpx;
      font-size: 40rpx;
      font-weight: 500;
      color: #fff;
      line-height: 56rpx;
      margin-bottom: 4rpx;
    }
    p:nth-child(2) {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #fff;
      line-height: 40rpx;
    }
  }
  .addressDiv {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2rpx 12rpx 1rpx rgba(0, 0, 0, 0.11);
    height: 616rpx;
    width: 690rpx;
    position: absolute;
    left: 30rpx;
    top: 170rpx;
    border-radius: 10rpx;
    .init1 {
      height: 110rpx;
      line-height: 110rpx;
      padding-left: 39rpx;
      font-size: 36rpx;
      font-weight: bold;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 33rpx 0 36rpx;
      display: flex;
      .name {
        font-size: 36rpx;
        color: #333333;
      }
      .ipt {
        flex: 1;
        height: 100rpx;
        line-height: 100rpx;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .borderBtm {
      border-bottom: 1rpx solid #e9e9e9;
    }
  }
}
.initBtm {
  height: 110rpx;
  line-height: 110rpx;
  line-height: 110rpx;
  background: #ffffff;
  color: #ccc;
  padding-right: 30rpx;
  color: #666;
  font-size: 28rpx;
  box-shadow: 1rpx 0px 4rpx 0px rgba(204, 204, 204, 1);
  .doBtn {
    display: inline-block;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 32rpx;
    border: 1rpx solid #adadad;
    border-radius: 38rpx;
    padding: 0 50rpx;
    color: #666;
    margin-left: 24rpx;
  }
}
.payModal {
  position: absolute;
  top: 0;
  left: 0;
  // bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
  .pay_content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 850rpx;
    background-color: #fff;
    .title {
      width: 100%;
      height: 90rpx;
      border-bottom: 1rpx solid #e9e9e9;
      color: #333;
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 90rpx;
      display: flex;
      p {
        flex: 1;
        color: #333;
        font-size: 32rpx;
      }
      img {
        width: 45rpx;
        height: 45rpx;
        margin: 20rpx 20rpx 0 0;
        display: inline-block;
      }
    }
    .lineItem {
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #e9e9e9;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      padding-left: 30rpx;
      color: #666;
      .cost {
        color: #333;
      }
      p {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #333;
        img {
          margin-left: 0;
        }
        span {
          color: #999;
          font-size: 28rpx;
        }
      }
      img {
        width: 50rpx;
        height: 50rpx;
        margin: 0 30rpx;
      }
    }
    .sureBtn {
      padding:0 30rpx;
      box-sizing: border-box;
      color: #666;
      .total {
        margin: 30rpx 0;
        span {
          color: #ff5453;
          font-size: 36rpx;
        }
      }
      .tip {
        margin: 10rpx 30rpx 50rpx 0;
        font-size: 26rpx;
        color: rgba(153, 153, 153, 1);
      }
      .button {
        // width: 660rpx;
        height: 92rpx;
        background: rgba(74, 100, 234, 1);
        line-height: 92rpx;
        text-align: center;
        color: #fff;
        border-radius: 46rpx;
      }
    }
  }
}
</style>
